<template>
    <div>
        <div class="bx">
           <div class="zf">
              <dv-border-box-1 class="to1">
                 <h3 align="center" style="color:white;margin-top:6px;">新型冠状肺炎实时监测</h3>
                 <div id="main">

                 </div>
               </dv-border-box-1>
               <dv-border-box-1 class="to2">
               </dv-border-box-1>
                <dv-border-box-1 class="to3">
               </dv-border-box-1>
           </div>
           <div class="zj">
             <dv-border-box-8 class="tj">
               <div class="shu1">
                 <p style="color:yellow;font-size:22px;text-align: center;">156622563</p>
                 <p style="color:gray;font-size:14px;text-align:center;margin-top:15px">累计确诊</p>
               </div>
               <div class="shu2">
                 <p style="color:yellow;font-size:22px;text-align: center;">32050060</p>
                 <p style="color:gray;font-size:14px;text-align:center;margin-top:15px">现存确诊</p>
               </div>
               <div class="shu3">
                 <p style="color:yellow;font-size:22px;text-align: center;">121309348</p>
                 <p style="color:gray;font-size:14px;text-align:center;margin-top:15px">累计治愈</p>
               </div>
               <div class="shu4">
                 <p style="color:yellow;font-size:22px;text-align: center;">3263155</p>
                 <p style="color:gray;font-size:14px;text-align:center;margin-top:15px">累计死亡</p>
               </div>
             </dv-border-box-8>
             <div class="xx">
                <div class="z1">
                  <p>累计确诊</p>
                </div>
                <div class="y1">
                  <p>累计确诊</p>
                </div>
             </div>
             <div class="gj">
                <div class="dt">
                  <div class="dt2">

                  </div>
                </div>
             </div>
           </div>
           <div class="yf">
             <dv-border-box-1 class="tg1">
                 <h3 align="center" style="color:white;margin-top:6px;">主要疫情国家治愈率</h3>
                 <div></div>
               </dv-border-box-1>
               <dv-border-box-1 class="tg2">
               </dv-border-box-1>
                <dv-border-box-1 class="tg3">
               </dv-border-box-1>
           </div>
        </div>
    </div>
</template>

<script setup>
// import * as echarts from 'echarts';
import {onMounted} from 'vue';


onMounted(() => {
  var chartDom = document.getElementById('main');
var myChart = echarts.init(chartDom);
var option;
  option = {
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      data: [120, 200, 150, 80, 70, 110, 130],
      type: 'bar',
      showBackground: true,
      background: {
        color: 'blue'
      }
    }
  ]
};
option && myChart.setOption(option);
})

</script>

<style lang='scss' scoped >
.bx {
  width: 100vw;
  height: 93vh;
  display: flex;
  .zf {
    flex: 2;
    width: 100%;
    height: 100%;
    .to1 {
      width: 100%;
      height: 33%;
      overflow: hidden;
      position: relative;
      #main{
      width: 90%;
      height: 320px;
       position: absolute;
      top: 0px;
      left: 0px;
      right: 0px;
      bottom: 0px;
      margin: -30px auto;
    
      }
    }
    .to2 {
      width: 100%;
      height: 33%;
      margin: 5px 0px;
    }
    .to3 {
      width: 100%;
      height: 33%;
    }
  }
  .zj {
    flex: 3;
    width: 100%;
    height: 93vh;
    position: relative;
    overflow: hidden;
    .tj{
      width: 100%;
      height: 140px;
      margin-top: 30px;
      
      
      .shu1{
        float: left;
        width: 25%;
        color: white;
        margin-top: 20px;
      }
      .shu2{
        float: left;
        width: 25%;
        color: white;
        margin-top: 20px;
      }
      .shu3{
        float: left;
        width: 25%;
        color: white;
        margin-top: 20px;
      }
      .shu4{
        float: left;
        width: 25%;
        color: white;
        margin-top: 20px;
      }
    }
    .xx{
      width: 100%;
      height: 80px;
      margin-top: 50px;
      display: flex;
      .z1{
        flex: 1;
        width: 49%;
        position: relative;
        p{
           color: yellow;
           font-size: 28px;
           width: 50%;
           height: 60%;
           background: rgba(0.3, 0, 0.3, 0.2);
           text-align: center;
            position: absolute;
            top: 0px;
            left: 0px;
            right: 0px;
            bottom: 0px;
            margin: 15px auto;
            border-radius: 30px;
           }
      }
      .y1{
        flex: 1;
        width: 49%;
        position: relative;
          p{
           color: white;
           font-size: 28px;
           width: 50%;
           height: 60%;
           background: rgba(0, 0, 0, 0.2);
           text-align: center;
            position: absolute;
            top: 0px;
            left: 0px;
            right: 0px;
            bottom: 0px;
            margin: 15px auto;
            border-radius: 30px;
           }
      }
    }
    .gj{
      width: 550px;
      height: 550px;
      background-image: url("../assets/lbx.0dea0f97.png");
      background-size: 100% 100%;
      position: absolute;
      top: 0px;
      left: 0px;
      right: 0px;
      bottom: 0px;
      margin: 0px auto;
      position: relative;
      overflow: hidden;
      .dt {
      color: white;
      width: 450px;
      height: 450px;
      background-image: url("../assets/jt.c268bab5.png");
      background-size: 100% 100%;
      position: absolute;
      top: 0px;
      left: 0px;
      right: 0px;
      bottom: 0px;
      margin: 50px auto;
      animation: fadenum 5s linear infinite;
      position: relative;
      .dt2{
        width: 350px;
        height: 350px;
        background-image: url("../assets/map.bab2b509.png");
        background-size: 100% 100%;
        position: absolute;
        top: 0px;
        left: 0px;
        right: 0px;
        bottom: 0px;
        margin:  auto;
      }
    }
    }
    
    @keyframes fadenum {
      0% {
        transform: rotate(0deg);
      }
      25% {
        transform: rotate(90deg);
      }
      50% {
        transform: rotate(180deg);
      }
      75% {
        transform: rotate(270deg);
      }
      100% {
        transform: rotate(360deg);
      }
    }
  }
  .yf {
    flex: 2;
    .tg1 {
      width: 100%;
      height: 33%;
      overflow: hidden;
    }
    .tg2 {
      width: 100%;
      height: 33%;
      margin: 5px 0px;
    }
    .tg3 {
      width: 100%;
      height: 33%;
    }
  }
}
</style>

